<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 12 Spine</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>

	<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
	<script>


	// create an array of assets to load

	var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"];

	// create a new loader
	loader = new PIXI.AssetLoader(assetsToLoader);

	// use callback
	loader.onComplete = onAssetsLoaded

	//begin load
	loader.load();


	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF, true);

	// create a renderer instance
	var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

	// set the canvas width and height to fill the screen
	renderer.view.style.display = "block";

	// add render view to DOM
	document.body.appendChild(renderer.view);

	function onAssetsLoaded()
	{
		// create a spine boy
		var spineBoy = new PIXI.Spine("data/spineboySpineData.json");

		// set the position
		spineBoy.position.x = window.innerWidth/2;
		spineBoy.position.y = window.innerHeight;

		spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400;

		// set up the mixes!
		spineBoy.stateData.setMixByName("walk", "jump", 0.2);
		spineBoy.stateData.setMixByName("jump", "walk", 0.4);

		// play animation
		spineBoy.state.setAnimationByName("walk", true);


		stage.addChild(spineBoy);

		stage.click = function()
		{
			spineBoy.state.setAnimationByName("jump", false);
			spineBoy.state.addAnimationByName("walk", true);

		}

		var logo = PIXI.Sprite.fromImage("../../logo_small.png")
		stage.addChild(logo);


		logo.anchor.x = 1;
		logo.position.x = window.innerWidth
		logo.scale.x = logo.scale.y = 0.5;
		logo.position.y = window.innerHeight - 70;
		logo.setInteractive(true);
		logo.buttonMode = true;
		logo.click = logo.tap = function()
		{
			window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
		}
	}



	requestAnimFrame(animate);

	function animate() {

	    requestAnimFrame( animate );
	    renderer.render(stage);
	}

	</script>

	</body>
</html>
